<template>
	<view class="box">
      <view class="topCont">
		  <view class="topNav">
			  <view class="back" @click="back">
				  <image :src="imgUrl+'/static/wap/img/leftBack.png'" mode="" class="backImg"></image>
			  </view>
			  <view class="navTitle">水费账单</view>
			  <view class="emptyBox"></view>
		  </view>
		  <view class="topMain">
		      
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" fields="month">
					<view class="timePicker" >
						<view class="dataNum">{{date}}</view>
						<image :src="imgUrl+'/static/wap/img/topjiantou.png'" mode="" class="timeImgJt"></image>
					</view>
				</picker>
			    
				<view class="money">￥{{total}}</view>
				
		  </view>
		  
	  </view>
	  <mydefault type="7" :showflag="showflag" ></mydefault>
	  <!-- 电费详情-->
	  <view class="billBox"  v-if="!showflag">
		  <view class="billList">
			  <view class="billLine" v-for="(item,index) in billList">
				  <view class="billLeft">
					  <text class="billday">{{item.day}}</text>
					  <text class="billmont">{{item.month}}月</text>
				  </view>
				  <view class="billRIght">
					  <view class="biliiRightName">消费</view>
					  <view class="billRIghtNum">{{item.day_cost}}</view>
				  </view>
			  </view>

			  
		  </view>
		  
		  
	  </view>
	</view>
</template>

<script>
	import util from '../../static/util.js'
	import mydefault from '@/components/default/default.vue';
	export default {
		components:{
		mydefault,
		},
		data() {
			
			return {
				showflag:false,
				imgUrl:util.globalData.imgPre,
				date:'',
				startDate: '',
				endDate: '',
				billList:'',
				water_code:'',
				total:'',
			}
		},
		onLoad() {
           this.getTime()
		   const userInfo = uni.getStorageSync('userInfo');
		   console.log(userInfo)
		   this.water_code=userInfo.water_code;
		   this.getBillList()
		},
		onShow(){
			
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			getBillList(){
				var that=this;
				that.ajax({
					url:'api/bill/getBillList',
					data:{
						code:that.water_code,
						type:2,
						date:that.date,
					},
					success:function(res){
						
						that.total=res.data.total||"0.00"
						that.billList=res.data.list;
						if(that.billList.length<=0){
							that.showflag=true
						}else{
							that.showflag=false
						}
					}
				  })
			},
			 bindDateChange: function(e) {
				  console.log(e)
			       this.date = e.target.value.replace("-",".")
				   console.log(this.date)
				   this.getBillList()
				   
			 },
			 getTime:function(){
				 var date = new Date(),
				 year = date.getFullYear(),
				 month = date.getMonth() + 1,
				 day = date.getDate(),
				 hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
				 minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
				 second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				 month >= 1 && month <= 9 ? (month = "0" + month) : "";
				 day >= 0 && day <= 9 ? (day = "0" + day) : "";
				 var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
				 console.log(timer)
				 this.date=year + '.' + month
				 return timer;
			 },
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		background: #F7F9FB;
		min-height: 100vh;
	}
	.topCont{
		width: 100vw;
		height: 276rpx;
		background: linear-gradient(#fed341 1%, #ffb017 99%);
       	padding-top:var(--status-bar-height);
	}
	.backImg{
		width: 40rpx;
		height: 40rpx;
		padding: 30rpx;
	}
	.navTitle{
		line-height: 100rpx;
		color: #333333;
		font-size: 34rpx;
	}
	.emptyBox{
		width: 100rpx;
	}
	.topNav{
		display: flex;
		justify-content: space-between;
	}
	.timeImgJt{
		width: 30rpx;
		height: 30rpx;
		padding-left: 20rpx;
		padding-top: 10rpx;
	}
	.topMain{
		color: #FFFFFF;
	}
	.timePicker{
		display: flex;
		padding-top: 10rpx;
	}
	.topMain{
		padding:20rpx 40rpx;
	}
	.money{
	   font-size: 48rpx;
	   font-weight: bold;
	}
	.topMain{
		display: flex;
		justify-content: space-between;
	}
	.billBox{
		position: relative;
		left: 30rpx;
		top: -50rpx;
		width: 690rpx;
	}
	.billList{
		width: 690rpx;
		
		background: #ffffff;
		border-radius: 15rpx;
		
		
	}
	.billLine{
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding-left: 36rpx;
	}
	.billday{
		color: #333333;
		font-size: 50rpx;
	}
	.billmont{
		color: #333333;
		font-size: 24rpx;
		padding-top: 20rpx;
	}
	.billLeft{
		width: 150rpx;
		display: flex;
		justify-content: space-around;
		padding-top: 38rpx;
	}
	.billRIght{
		display: flex;
		justify-content: space-between;
		width: 540rpx;
		padding-top: 60rpx;
		padding-bottom: 45rpx;
		border-bottom: 1px solid #DDDDDD;
	}
	.billRIghtNum{
		padding-right: 50rpx;
		color: #F99600;
		font-size: 34rpx;
		font-weight: 500;
	}
	.biliiRightName{
		padding-left: 55rpx;
		color: #333333;
		font-weight: bold;
		font-size: 28rpx;
	}
</style>
